import React from 'react';
import { Accordion, List, WhiteSpace } from 'antd-mobile';

import MyModal from '../../common/Modal';

import './index.sass';

class CustomerInformation extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      moreVisible: false,
    }
  }
  renderHeader(title) {
    return (
      <div className="customer-information-list-title">
        <b />
        {title}
      </div>
    );
  }

  renderItem = (extra, title) => {
    return extra ? <List.Item extra={extra}>
      <span className="gray">{title}</span>
    </List.Item> : null
  }

  onClickMore = (moreType) => {
    this.setState({moreType})
  }

  renderEmployees = (data, all = false) => {
    let arr = [];
    const len = data.length;
    const num = all ? len : len >= 5 ? 5 : len;
    for(let i = 0; i < num; i++){
      arr.push(data[i].name ? <List.Item key={'job' + i} extra={data[i].name}>
        <span className="gray">{data[i]['job_title']}</span>
      </List.Item> : null)
    }
    if(!all && len >= 5) arr.push(<List.Item onClick={() => {this.onClickMore('employees')}} key={'job-more'}>
      <div className="text-link text-center">点击查看更多</div>
    </List.Item>)
    return arr;
  }

  renderBranches = (data, all = false) => {
    let arr = [];
    const len = data.length;
    const num = all ? len : len >= 5 ? 5 : len;
    for(let i = 0; i < num; i++){
      arr.push(data[i].name ? <List.Item key={'branches' + i}>
        <span className="gray">{data[i].name}</span>
      </List.Item> : null)
    }
    if(!all && len >= 5) arr.push(<List.Item onClick={() => {this.onClickMore('branches')}} key={'branches-more'}>
      <div className="text-link text-center">点击查看更多</div>
    </List.Item>)
    return arr;
  }

  renderPartners = (data, all = false) => {
    let arr = [];
    const len = data.length;
    const num = all ? len : len >= 5 ? 5 : len;
    for(let i = 0; i < num; i++){
      arr.push(data[i] ? <Shareholders key={'partners' + i} data={data[i]} /> : null)
    }
    if(!all && len >= 5) arr.push(<List.Item onClick={() => {this.onClickMore('partners')}} key={'partners-more'}>
      <div className="text-link text-center">点击查看更多</div>
    </List.Item>)
    return arr;
  }

  renderAbnormal = (data, all = false) => {
    let arr = [];
    const len = data.length;
    const num = all ? len : len >= 5 ? 5 : len;
    for(let i = 0; i < num; i++){
      arr.push(data[i] ? <Abnormal key={'abnormal' + i} data={data[i]} /> : null)
    }
    if(!all && len >= 5) arr.push(<List.Item onClick={() => {this.onClickMore('abnormal')}} key={'abnormal-more'}>
      <div className="text-link text-center">点击查看更多</div>
    </List.Item>)
    return arr;
  }

  renderChangeRecords = (data, all = false) => {
    let arr = [];
    const len = data.length;
    const num = all ? len : len >= 5 ? 5 : len;
    for(let i = 0; i < num; i++){
      arr.push(data[i] ? <ChangeRecords key={'changeRecords' + i} data={data[i]} /> : null)
    }
    if(!all && len >= 5) arr.push(<List.Item onClick={() => {this.onClickMore('changeRecords')}} key={'changeRecords-more'}>
      <div className="text-link text-center">点击查看更多</div>
    </List.Item>)
    return arr;
  }

  renderMoreContent = () => {
    const {moreType, data} = this.state; 
    const {} = data;
    let content = null;
    switch (moreType){
      case 'employees': content = this.renderEmployees() ;
      case 'branches': ;
      case 'partners': ;
      case 'abnormal': ;
      case 'changeRecords': ;
    }
    this.setState({moreVisible: true});
    return null
  }

  render() {
    const {data, isQxb} = this.props;
    const { baseData, applicantData, businessTypeString, businessLicenseData } = data;
    const qxbData = data.qxbData || {};
    const employees = this.renderEmployees(qxbData.employees ? JSON.parse(qxbData.employees) : []);
    const branches = this.renderBranches(qxbData.branches ? JSON.parse(qxbData.branches) : []);
    const partners = this.renderPartners(qxbData.partners ? JSON.parse(qxbData.partners) : []);
    const abnormal = this.renderAbnormal(qxbData.abnormalItems ? JSON.parse(qxbData.abnormalItems) : []);
    const changeRecords = this.renderChangeRecords(qxbData.changeRecords ? JSON.parse(qxbData.changeRecords) : []);

    const moreContent = this.renderMoreContent();
    return (
      <div className="customer-information-container">
        <MyModal
          visible={this.state.moreVisible}
        >
          {moreContent}
        </MyModal>
        <Accordion defaultActiveKey="0">
          <Accordion.Panel header={this.renderHeader('企业基本信息')}>
            <List className="customer-information-base-list global-list">
              {
                this.renderItem(businessTypeString, '行业类型')
              }
              {
                this.renderItem(baseData.email, '邮件')
              }
              {
                this.renderItem(baseData.telephone, '电话')
              }
              {
                this.renderItem(baseData.address, '办公地址')
              }
              {
                this.renderItem(baseData.currentEmail, '邮件（现）')
              }
              {
                this.renderItem(baseData.currentTelephone, '电话（现）')
              }
              {
                this.renderItem(baseData.currentAddress, '办公地址（现）')
              }
            </List>
          </Accordion.Panel>
          <Accordion.Panel header={this.renderHeader('营业执照信息')} className="pad">
            <List className="customer-information-base-list">
              {
                this.renderItem(businessLicenseData.businessLicenseData.businessLicense, '营业执照')
              }
              {
                this.renderItem(qxbData.status, '经营状态')
              }
              {
                this.renderItem(qxbData.econKind, '企业类型')
              }
              {
                this.renderItem(qxbData.belongOrg, '所属工商局')
              }
              {
                this.renderItem(businessLicenseData.businessLicenseData.isComprehensiveCertificateString, '是否三证合一')
              }
              {
                this.renderItem(isQxb ? qxbData.creditNo : businessLicenseData.businessLicenseData.businessLicenseCode, '统一社会信用代码')
              }
              {
                this.renderItem(qxbData.creditNo, '组织机构号')
              }
              {
                this.renderItem(qxbData.regNo, '企业注册号')
              }
              {
                this.renderItem(isQxb ? qxbData.operName : businessLicenseData.businessLicenseData.legalPerson, '法人代表')
              }
              {
                this.renderItem(businessLicenseData.businessLicenseData.legalIdentityCard, '法人身份证号')
              }
              {
                this.renderItem(qxbData.registCapi, '注册资本')
              }
              {
                this.renderItem(qxbData.startDate, '成立日期')
              }
              {
                this.renderItem(`${businessLicenseData.businessLicenseData.businessTermStartString || '/'} 至 ${businessLicenseData.businessLicenseData.businessTermEndString || '/'}`, '营业期限')
              }
              {
                this.renderItem(qxbData.checkDate, '核准日期')
              }
              {
                this.renderItem(qxbData.scope, '经营范围')
              }
            </List>
          </Accordion.Panel>
          {
            isQxb && <Accordion.Panel header={this.renderHeader('企业工商信息')} className="pad">
            <Accordion defaultActiveKey="0" style={{ paddingLeft: '0.1rem' }}>
              <Accordion.Panel header={this.renderHeader('主要人员')} className="pad">
                <List className="customer-information-base-list global-list">
                  {
                    employees
                  }
                </List>
              </Accordion.Panel>
              <Accordion.Panel header={this.renderHeader('分支机构')} className="pad">
                <List className="customer-information-base-list global-list">
                  {
                    branches
                  }
                </List>
              </Accordion.Panel>
              <Accordion.Panel header={this.renderHeader('股东信息')} className="pad">
                {
                  partners
                }
              </Accordion.Panel>
              <Accordion.Panel header={this.renderHeader('经营异常')} className="pad">
                {
                  abnormal
                }
              </Accordion.Panel>
              <Accordion.Panel header={this.renderHeader('工商变更')} className="pad">
                {
                  changeRecords
                }
              </Accordion.Panel>
            </Accordion>
          </Accordion.Panel>
          }
        </Accordion>
      </div>
    );
  }
}

class ChangeRecords extends React.Component{
  constructor(props) {
    super(props);
    
  }
  render() {
    const {data} = this.props;
    return (
      <div className='customer-information-base-changeRecords-container'>
        <div className='customer-information-base-changeRecords-row'>
          <div>{data.change_date}</div>
          <div>{data.change_item}</div>
        </div>
        <div className='customer-information-base-changeRecords-row'>
          <div>变更前内容</div>
          <div>变更后内容</div>
        </div>
        <div className='customer-information-base-changeRecords-row'>
          <div>{data.before_content}</div>
          <div>{data.after_content}</div>
        </div>
      </div>
    );
  }
}

class Abnormal extends React.Component{
  constructor(props) {
    super(props);
    
  }

  renderItem = (extra, title) => {
    return extra ? <List.Item extra={extra}>
      <span className="gray">{title}</span>
    </List.Item> : null
  }

  render() {
    const {data} = this.props;
    return (
      <div style={{ background: '#EFEFEF' }}>
        <List className="customer-information-base-abnormalItems-list">
          {
            this.renderItem(data.in_reason, '列入原因')
          }
          {
            this.renderItem(data.in_date, '列入日期')
          }
          {
            this.renderItem(data.out_reason, '移出原因')
          }
          {
            this.renderItem(data.out_date, '移出时间')
          }
        </List>
      </div>
    );
  }
}

class Shareholders extends React.Component {
  constructor(props) {
    super(props);
  }

  renderItem = (extra, title) => {
    return extra ? <List.Item extra={extra}>
      <span className="gray">{title}</span>
    </List.Item> : null
  }

  render() {
    const {data} = this.props;
    let should = data.should_capi_items.length == 0 ? false : true;
    let real = data.real_capi_items.length == 0 ? false : true;
    return (
      <div style={{ background: '#EFEFEF' }}>
        <List className="customer-information-base-shareholders-list">
          {
            this.renderItem(data.stock_type, '股东类型')
          }
          {
            this.renderItem(data.name, '股东姓名')
          }
          {
            this.renderItem(data.identify_type, '证件类型')
          }
          {
            this.renderItem(data.identify_no, '证件号码')
          }
          {
            this.renderItem(should ? data.should_capi_items[0].shoud_capi + '/' + data.should_capi_items[0].should_capi_date : '', '认缴出资')
          }
          {
            this.renderItem(should ? data.should_capi_items[0] && data.should_capi_items[0].invest_type : '', '出资方式')
          }
          {
            this.renderItem(real ? data.real_capi_items[0] && data.real_capi_items[0].real_capi + '/' + data.real_capi_items[0] && data.real_capi_items[0].real_capi_date : '', '认缴出资')
          }
          {
            this.renderItem(real ? data.real_capi_items[0] && data.real_capi_items[0].invest_type : '', '出资方式')
          }
        </List>
        <WhiteSpace size="xs" />
      </div>
    );
  }
}

export default CustomerInformation;
